<template>
  <div class="pmd">
    <div class="header">
      <table>
        <tr>
          <td style="position: absolute; right: 30px">
            <el-button @click="AddPmd()" type="success" icon="el-icon-plus"
            >新建跑马灯</el-button>
          </td>
        </tr>
      </table>
    </div>
    <div class="content">
      <el-main style="margin-top: 60px">
        <el-table
          border
          :fit="true"
          :header-cell-style="{
            color: '#333',
            fontFamily: 'MicrosoftYaHeiUI',
            fontWeight: 500,
            fontSize: '16px',
          }"
          :data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)"
        >
          <el-table-column 
            prop="id" 
            sortable 
            label="ID"> 
          </el-table-column>
          <el-table-column 
            prop="type" 
            sortable 
            label="类型"
          ></el-table-column>
          <el-table-column 
            prop="content" 
            sortable 
            label="公告"
          >
          </el-table-column>
          <el-table-column 
            prop="state" 
            sortable 
            label="状态"
          >
          </el-table-column>
          <el-table-column
            prop="startime"
            :formatter="formatDate"
            sortable
            label="开始时间"
          >
          </el-table-column>
          <el-table-column
            prop="endtime"
            :formatter="formatDate"
            sortable
            label="结束时间"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            width="200"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="upd(scope.row)" type="primary">
                修改
              </el-button>
              <el-button @click="del(scope.row)" type="danger">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pageNation
          :total="tableData.length"
          :page-size="pageSize"
          @pageChange="pageChange"
          :page_index="currentPage"
        />
      </el-main>
      <PmdDialog
        :dialog="dialog"
        :PmdForm="PmdForm"
        @update="getProfile($event)"
      />
    </div>
  </div>
</template>
<script>
import PmdDialog from "../../components/gmtool/Pmddialog.vue";
import pageNation from "../../components/pagenation/pageNation";
import {formatDate} from "../../utils/index"
export default {
  name: "Pmd",
  components: { PmdDialog, pageNation },
  data() {
    return {
      formatDate:formatDate,
      tableData: [],
      PmdForm: {
        title: "",
        content: "",
        id: "",
        startime: "",
        endtime: "",
      },
      currentPage: 1, //当前页数
      pageSize: 8, //每页的数据
      dialog: {
        show: false, //是否显示弹出框
        title: "", //弹出框的title
        option: "edit",
      },
    };
  },
  methods: {
    //分页
    pageChange(item) {
      this.currentPage = item.page_index;
      this.pageSize = item.page_limit;
    },
    //点击新增跑马灯按钮弹出层
    AddPmd() {
      this.dialog = {
        show: true,
        title: "新建跑马灯",
        option: "add",
      };
      this.PmdForm = {
        type: "",
        content: "",
        id: "",
        startime: "",
        endtime: "",
      };
    },
    //点击查询按钮
    search() {
    },
    //获取弹出层中的文本信息
    getProfile(data) {
      console.log(data);
    },
    //点击删除
    del(row) {
      this.$confirm("确定删除该条信息吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          console.log(row);
      }).catch(() => {
          return;
      });
    },
    //点击修改
    upd(row) {
        this.dialog = {
          show: true,
          title: "编辑跑马灯",
          option: "edit",
        };
        this.PmdForm = {
          type: row.type,
          content: row.content,
          id: row.id,
          startime: row.startime * 1000,
          endtime: row.endtime * 1000,
        };
    }
  },
};
</script>
<style scoped>
.pmd {
  width: 100%;
  height: auto;
  background-color: #fff;
}
.pmd td {
  padding: 18px;
  font-size: 14px;
  display: flex;
  float: left;
}
</style>